<template>
	<view>
		<view class="">
			<view class="topImgs">
				<view class="imgBck" @tap="back()">
					<image src="/static/ble/exchange/back.png" mode=""></image>
				</view>
				<view class="topImg">
					<image src="/static/ble/exchange/touImg.png" mode=""></image>
				</view>
			</view>
			<view class="bottoms">
				<view class="comment" :style="`background-image: url(${exchange.image});`">
					<view class="commentBtn"> 
						<input :placeholder="holder" v-model="code" @focus="holder = ''" @blur="holder = '请输入兑换码'" class="code-input" />
						<view class="gift" @tap="convert()">
							<image src="/static/ble/exchange/gift.png" mode=""></image>
						</view>
					</view>
					<view class="commentGoto" @tap="gotoPage()">
						<view class="toFonts">
							轻松小镇版姜小竹硬件使用意见反馈通道
						</view>
						<image src="/static/ble/exchange/gotoImg.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="isShowAttested" round="10" mode="center" @close="isShowAttested = false">
			<view class="my-popup">
				<view class="text-center m-t-5">
					<image src="../../../static/img/attested-icon.png" class="attested-icon"></image>
				</view>
				<view class="text-center bold f-xl m-t-10 m-b-10">无法使用兑换码</view>
				<view class="f-base text-center m-b-30">请先完成实名认证后使用</view>
				<u-button color="#000000" shape="circle" @click="toPage">前往实名</u-button>
				<view class="f-xxs text-center grey m-t-15">根据国家相关法律要求<br>
					未完成实名认证不可获得藏品</view>
			</view>
		</u-popup>
		<u-popup :show="isShowGet" mode="center" bgColor="transparent" round="10" @close="isShowGet = false" overlayOpacity="0.9">
			<view class="my-popup get">
				<view class="text-center f-base m-b-10">兑换成功</view>
				<view class="f-xl title m-b-20 text-center bold">{{data.title}}</view>
				<view class="text-center">
					<image :src="data.image" class="collection-img"></image>
				</view>
				<view class="stage flex-no-horizontal">
					<view class="f-large get-btn bold text-center" @click="handlClick">{{data.info}}</view>
					<view class="f-xs m-t-10 text-center grey">{{data.urlTip}}</view>
				</view>
				<view class="light">
					<image src="../../../static/img/convert-collection-light.png"></image>
				</view>
			</view>
		</u-popup>
		<u-loading-page style="z-index: 10;" :loading="loadingType" loading-text="加载中..."></u-loading-page>
	</view>
</template>

<script>
	import {
		redemptionCodeHardware,
		exchange_background_image
	} from '@/api/bluetooth.js'
	export default {
		data() {
			return {
				code:'',
				loadingType: true, //loading加载状态
				isShowGet: false,//兑换成功弹框
				isShowAttested: false,//未实名弹框
				data: {}, //兑换完毕data
				exchange: {} ,//配置data
				holder: '请输入兑换码'
			}
		},
		onLoad() {
			this.onExchange()
		},
		methods: {
			gotoPage(){
				let url = 'https://jinshuju.net/f/yUeVHj'
				uni.navigateTo({
					url: `/pages/collection/otherPage?url=${url}`
				})
			},
			back() {
				uni.navigateBack()
			},
			async onExchange() {
				try {
					const res = await exchange_background_image()
					this.exchange = res.data
					setTimeout(()=>{
						this.loadingType = false
					}, 2000)
					console.log(res.data)
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
					//TODO handle the exception
				}
			},
			async convert() {
				try {
					if (!this.code) {
						uni.showToast({
							title: '请输入兑换码',
							icon: 'none'
						})
						return
					}
					if (!this.$store.state.userInfo.isAttested) {
						this.isShowAttested = true
						return
					}
					const res = await redemptionCodeHardware({
						code: this.code
					})
					this.data.image = res.data.data.image_url
					this.data.title = res.data.data.title
					this.data.info = res.data.data.info
					this.data.urlTip = res.data.data.describe
					this.data.jump = res.data.data.jump
					this.isShowGet = true
				} catch (e) {
					console.log(e)
					if (e.code === 99) {
						this.isShowAttested = true
					} else {
						uni.showToast({
							title: e.message || e.data,
							icon: 'none'
						})
					}
					//TODO handle the exception
				}
			},
			handlClick() {
				this.isShowGet = false
				if (!this.data.jump) return
				console.log(111, this.data)
				if (!!~this.data.jump.indexOf('http') || !!~this.data.jump.indexOf('https')) {
					uni.navigateTo({
						url: '../index/outerChain?url=' + this.data.jump
					})
				} else {
					uni.navigateTo({
						url: this.data.jump
					})
				}
			},
			toPage() {
				this.isShowAttested = false
				uni.navigateTo({
					url: '/pages/user/realName'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topImgs{
		.imgBck{
			position: absolute;
			z-index: 1;
			width: 80rpx;
			height: 80rpx;
			top: 60rpx;
			left: 40rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.topImg{
			width: 100%;
			height: 700rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.bottoms{
		.comment{
			
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 6000rpx;
			position: relative;
			.commentBtn{
				position: relative;
				top: 40rpx;
				.code-input{
					position: absolute;
					background: #fff;
					border-radius: 50px;
					width: 80%;
					margin:  auto;
					padding: 30rpx 0;
					text-align: center;
					left: 0;
					right: 0;
					font-size: 26rpx;
				}
				.gift{
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					right: 110rpx;
					top: 5rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.commentGoto{
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 150rpx;
				padding-left: 48rpx;
				.toFonts{
					font-size: 26rpx;
					color: #cadaec;
					margin-right: 20rpx;
					letter-spacing: 1px;
					font-weight: 700;
				}
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.my-popup {
		width: 590rpx;
		box-sizing: border-box;
		padding: 45rpx 65rpx;
		position: relative;
		background-color: #ffffff;
		border-radius: 20rpx;
	
		.attested-icon {
			width: 174rpx;
			height: 174rpx;
		}
	
		.service-img {
			width: 269rpx;
			height: 269rpx;
		}
	
		.close {
			position: absolute;
			bottom: -90rpx;
			left: 50%;
			transform: translateX(-50%);
			opacity: 0.8;
		}
	}
	
	.get {
		background-color: transparent;
		color: white;
		position: relative;
	
		.title {
			color: #FFFFFF;
			background: linear-gradient(0deg, #FEE5BB 0%, #EDF4FF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	
		.collection-img {
			width: 342rpx;
			height: 342rpx;
		}
	
		.stage {
			width: 464rpx;
			background: url('../../../static/img/convert-collection-stage.png') no-repeat;
			background-size: 100%;
			height: 210rpx;
			justify-content: center;
			flex-direction: column;
	
			.get-btn {
				width: 343rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #FFFFFF, #EDF4FF);
				border-radius: 40rpx;
				color: #000000;
				line-height: 80rpx;
			}
		}
	
		.light {
			position: absolute;
			left: 0;
			right: 0;
			top: 60rpx;
			height: 70%;
			z-index: -1;
			animation: rotate 5s linear infinite;
	
			@keyframes rotate {
				0% {
					transform: rotate(0)
				}
	
				100% {
					transform: rotate(360deg)
				}
			}
	
			>image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
